<html>
    <head>
        <title>FGO资源计划</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet">
    </head>
    <body>
      <div class="navbar">
        <span class="nav-title">Fate/Grand Order Resource Plan</span>
        <span class="nav-right"><a href="#">未登录</a></span>
      </div>
      <div id="fgorpApp">
        <!-- 右侧边栏 -->
        <div id="menu" class="menu menu-right">
          <ul>
            <li><a class="fgo-menu-button" href='#servant-query'>
              <div class="fgo-menu-button" id="btn-servant-query">英灵图鉴</div>
            </a></li>
            <li><a class="fgo-menu-button" href='#servant-manage'>
              <div class="fgo-menu-button" id="btn-servant-manage">灵基一览</div>
            </a></li>
            <li><a class="fgo-menu-button" href='#item-manage'>
              <div class="fgo-menu-button" id="btn-item-manage">道具一览</div>
            </a></li>
            <li><a class="fgo-menu-button" href='#summon-emu'>
              <div class="fgo-menu-button" id="btn-summon-emu">召唤模拟</div>
            </a></li>
            <li><a class="fgo-menu-button" href='#battle-emu'>
              <div class="fgo-menu-button" id="btn-battle-emu">战斗模拟</div>
            </a></li>
          </ul>
        </div>
        <!-- 左侧内容 -->
        <div class="container">
          <div class="content-left">
            <div id="servant-query">
              <h2>英灵图鉴</h2>
              <hr/>
              <table id="servant-query-result" class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>编号</th>
                    <th>头像</th>
                    <th>名称</th>
                    <th>职阶</th>
                    <th>基础攻击力</th>
                    <th>基础生命值</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="servant in servants">
                    <td :id="servant.anchor">
                      No.{{ servant.no }}
                    </td>
                    <td><img class="servant-avatar" :src="servant.avatar_url" :width="avatar.width" :height="avatar.height" /></td>
                    <td>
                      <span class='servant-name-cn'>{{ servant.name_cn }}</span>
                      <!-- <br/><span class='servant-name-jp'>{{ servant.name }}</span> -->
                    </td>
                    <td>{{ servant.class }}</td>
                    <td>{{ servant.atk }}</td>
                    <td>{{ servant.hp }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
      <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
              integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
              crossorigin="anonymous"></script>
      <script src="https://vuejs.org/js/vue.js"></script>
      <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.js"></script>
      <script type="text/javascript">
        var asset_cdn = 'http://oz5wdk2qn.bkt.clouddn.com';
        var servant_data = '';

        var app = new Vue({
          el: '#fgorpApp',
          data: {
            avatar: {
              width: 96,
              height: 105
            },
            servants: []
          }
        });

        $(document).ready(function() {
          $.ajax({
            url: "data/servant-metadata.json",
            dataType: "json",
            success: function(data) {
              var servants_data = new Array();
              data.forEach(function(value, index) {
                value.no = value.id;
                if (value.id < 100) value.no = '0' + value.no;
                if (value.id < 10) value.no = '0' + value.no;
                value.avatar_url = asset_cdn + '/servant/avatar/' + value.no + '.png';
                value.anchor = 'servant-' + value.no;
                servants_data[index] = value;
              });
              app.servants = servants_data;
            },
            timeout: function() {
              alert("获取数据超时");
            }
          });
        });
      </script>
    </body>
</html>
